<template>
  <el-button type="primary" @click="dialogVisible=true">添加标签</el-button>

  <!--添加标签弹出框-->
  <el-dialog
      v-model="dialogVisible"
      :title="isAdd?'添加标签':'修改标签'"
      width="30%"
      :before-close="handleClose">
    <el-form ref="tagFormRef"
             :model="tagFrom"
             :rules="rules"
             label-width="80px">
      <el-form-item label="标签名称" prop="tagName">
        <el-input v-model="tagFrom.tagName" type="text" @keydown.enter="tagOperation" maxlength="12" show-word-limit/>
      </el-form-item>
      <el-form-item label="标签颜色" prop="tagColor">
        <el-color-picker v-model="tagFrom.tagColor"/>
      </el-form-item>
      <el-form-item label="标签状态" prop="isUse">
        禁用
        <el-switch v-model="tagFrom.isUse"
                   style="margin:0px 5px;--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
        启用
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="tagOperation">
          保存
        </el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <el-divider direction="vertical"></el-divider>
  <el-input
      v-model="searchText"
      placeholder="搜索标签"
      size="default"
      style="width: 350px"
      clearable
      maxlength="12"
      show-word-limit
      @clear="getAll"
      @keydown.enter="getAll"
  >
    <template #append>
      <el-button @click="getAll">
        <el-icon>
          <Search/>
        </el-icon>
      </el-button>
    </template>
  </el-input>
  <el-divider direction="vertical"></el-divider>
  <el-button :icon="Refresh" :loading="loading" @click="refreshTable">
    <span>刷新</span>
  </el-button>
  <el-divider></el-divider>
  <!-- 标签展示区-->
  <el-space wrap size="large">
    <el-card v-for="item in tableData" :key="item.tagId" style="width: 250px;">
      <template #header>
        <div class="card-header">
          <span>{{ item.tagName }}</span>
          <el-tooltip
              effect="dark"
              content="彻底删除标签"
              placement="bottom">
            <el-button text style="float: right;color: red" @click="deleteTag(item.tagId)">
              <el-icon>
                <Delete/>
              </el-icon>
            </el-button>
          </el-tooltip>
          <el-tooltip
              effect="dark"
              content="修改标签"
              placement="bottom">
            <el-button text style="float: right" @click="editTag(item)">
              <el-icon>
                <Edit/>
              </el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </template>
      标签颜色：
      <el-color-picker v-model="item.tagColor" @change="updateTag(item)"/>
      <el-tooltip
          effect="dark"
          :content="item.isUse ? '标签已启用':'标签已禁用'"
          placement="bottom">
        <el-switch :loading="loading" v-model="item.isUse" @change="updateTag(item)"
                   style="float: right;--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
      </el-tooltip>
    </el-card>
  </el-space>
  <el-divider></el-divider>
  <!--分页-->
  <div style="display: flex;">
    <el-pagination
        v-model:current-page="current"
        v-model:page-size="size"
        :page-sizes="[20, 40, 60, 80]"
        :small="true"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="margin: auto;"
    />
  </div>

</template>

<script>
import {Search, Refresh} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";

export default {
  name: "TagManage",
  data() {
    return {
      Refresh, Search,
      loading: false,
      searchText: "",
      dialogVisible: false,
      // false 表示修改标签
      isAdd: true,
      tagFrom: {
        tagId: null,
        tagName: "",
        tagColor: "",
        isUse: true,
      },
      rules: {
        tagName: [
          {required: true, message: '请输入标签名', trigger: 'blur'},
          {min: 1, max: 20, message: '用户名长度应该在1-20位', trigger: 'blur'},
        ],
      },
      tableData: [],
      total: 1,
      current: 1,
      size: 20

    }
  },
  created() {
    this.getAll()
  },
  methods: {
    async getAll() {
      let {data: result} = await this.$http.get("/api/tag/getTags", {
        params: {
          pageSize: this.size,
          pageNum: this.current,
          searchText: this.searchText
        }
      })
      this.tableData = result.dataMap.page.records
      this.current = result.dataMap.page.current
      this.total = result.dataMap.page.total
      this.size = result.dataMap.page.size
    },
    refreshTable() {
      this.loading = true
      this.getAll()
      this.loading = false
    },
    handleClose() {
      this.$refs.tagFormRef.resetFields()
      this.dialogVisible = false
      this.tagFrom = {
        tagId: null,
        tagName: "",
        tagColor: "",
        isUse: false,
      }
      this.isAdd = true
    },
    tagOperation() {
      if (this.isAdd) {
        this.addTag()
      } else {
        this.updateTag(this.tagFrom)
      }
    },
    editTag(item) {
      // es6 新特性，深拷贝
      this.tagFrom = {...item}
      this.isAdd = false
      this.dialogVisible = true
    },
    addTag() {
      this.$refs.tagFormRef.validate(async (validate) => {
        if (validate) {
          let {data: result} = await this.$http.post("/api/tag/saveTag", this.tagFrom)
          if (result.code === 400) {
            ElMessage.error({
              showClose: true, message: result.msg
            })
          } else {
            ElMessage.success({
              showClose: true, message: result.msg
            })
            this.handleClose()
            this.refreshTable()
          }
        } else {
          ElMessage.error({
            showClose: true, message: "表单填写有误！"
          })
        }
      })
    },
    async updateTag(item) {
      this.loading = true
      let {data: result} = await this.$http.post("/api/tag/updateTag", item)
      if (result.code !== 200) {
        ElMessage.error({
          showClose: true, message: result.msg
        })
      } else {
        ElMessage.success({
          showClose: true, message: result.msg
        })
      }
      this.loading = false
      this.handleClose()
      this.refreshTable()

    },
    async deleteTag(tagId){
      this.loading = true
      let {data: result} = await this.$http.get("/api/tag/deleteTag", {
        params: {
          tagId: tagId,
        }
      })
      if (result.code !== 200) {
        ElMessage.error({
          showClose: true, message: result.msg
        })
      } else {
        ElMessage.success({
          showClose: true, message: result.msg
        })
      }
      this.refreshTable()
    },
    // 分页大小改变
    handleSizeChange() {
      this.refreshTable()
    },
    // 分页页数改变
    handleCurrentChange() {
      this.refreshTable()
    },
  }
}
</script>

<style scoped>

</style>